<template>
  <view class="classList">
    <!-- 刷新动画 -->
    <view v-if="!classfiyList.length && !noData" class="loadingLayout">
      <uni-load-more status="loading"></uni-load-more>
    </view>
    
    <view class="content">
        <navigator :url="'/pages/preview/preview?id='+item._id" class="item" v-for="item in classfiyList" :key="item._id">
          <image :src="item.smallPicurl" mode="aspectFill"></image>
        </navigator>
    </view>
    <!-- 触底刷新动画盒子 -->
    <view class="loadingLayout" v-if="classfiyList.length || noData">
      <uni-load-more :status="noData ? 'noMore' : 'loading'"></uni-load-more>
    </view>
  </view>
  
  
</template>

<script setup>
import { onLoad,onReachBottom,onUnload } from "@dcloudio/uni-app"
import { apiGetClassList } from "@/api/apis.js"
import { ref } from "vue"
const classfiyList = ref([])
const noData = ref(false)
onUnload(()=>{
  // 离开页面
  uni.removeStorageSync('storageClassList')
})
const queryParams = {
  pageNum:1,
  pageSize:12
}
onLoad((e)=>{
  const { id = null ,name = '分类列表' } = e
  queryParams.classid = id
  // 设置导航条标题
  uni.setNavigationBarTitle({
    title:name
  })
  getClassfiyList()
})
// 触底加载更多
onReachBottom(()=>{
  if(noData.value) {
    return uni.showToast({
      title:'数据加载完毕'
    })
  }
  queryParams.pageNum++
  getClassfiyList()
})
// 获取分类壁纸列表
const getClassfiyList = async() =>{
  const res = await apiGetClassList(queryParams)
  // 数据加载完毕
  if(res.data.length < queryParams.pageSize) {
    noData.value = true
    uni.hideLoading()
  }
  // 赋值
  classfiyList.value =[...classfiyList.value,...res.data]
  // console.log(classfiyList.value);
  uni.setStorageSync('storageClassList',classfiyList.value)
}
</script>

<style lang="scss">
.classList {
  .content {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5rpx;
    padding: 5rpx;
    .item {
      height: 440rpx;
      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
}
</style>
